<template>
  <div class="trade-container">
    <h3 class="title">填写并核对订单信息</h3>

    <div class="content">
      <!-- 收件人信息地方 -->
      <h5 class="receive">收件人信息</h5>
      <div class="content2">
        <label>姓名:</label>
        <input type="text" v-model="bName" @blur="getName" id="bna">
        <span>{{mesName}}</span><br/>
      </div>
      <el-divider></el-divider>
      <div class="content2">
        <label>联系电话:</label>
        <input type="text" v-model="bPhone" @blur="getPhone" id="bph">
        <span>{{mesPhone}}</span><br/>
      </div>
      <el-divider></el-divider>
      <div class="content2">
        <label>联系地址:</label>
        <input type="text" v-model="bAddress" @blur="getAddress" id="bad">
        <span>{{mesAddress}}</span>
      </div>
      <div class="line"></div>
      <h5 class="pay">确认商品</h5>
      <div class="detail">
        商品图片：
        <div class="SwiperBox">
        <img :src="$route.query.gImgPath[ShowImg]" alt="" />
        <div class="leftBtn" @click="PrevFun($route.query.gImgPath.length)">&larr;</div>
        <div class="rightBtn" @click="NextFun($route.query.gImgPath.length)">&rarr;</div>
        </div>
        商品名称：{{$route.query.gName}}<br/>
        商品价格：{{$route.query.gPrice}}<br/>
        商品信息：<div v-html="$route.query.gInfo"></div><br/>
        库存数：{{$route.query.gstorage}}<br/>
        <div v-if="otype==0">
          购买数：<el-input-number v-model="num"  :min="1" :max="parseInt($route.query.gQuantity)" label="number"></el-input-number>
        </div>
        <div v-else>
          租借数：<el-input-number v-model="num"  :min="1" :max="parseInt($route.query.gQuantity)" label="number"></el-input-number><br/>
          租借月数：
          <el-radio-group v-model="lease" size="small">
            <el-radio-button label=1></el-radio-button>
            <el-radio-button label=2></el-radio-button>
            <el-radio-button label=3></el-radio-button>
            <el-radio-button label=4></el-radio-button>
          </el-radio-group>
        </div>
      </div>
      
      <div class="line"></div>
      
    </div>
    <div class="money clearFix">
      <ul>
        <div v-if="otype==0">
        <li>
          <b>
            共<i>{{num}}</i>件商品，总购买商品的金额：
          </b>
          <span>¥{{pay}}</span>
        </li>
         </div>
         <div v-else>
          <li>
          <b>
            共<i>{{num}}</i>件商品，租借商品的押金：
          </b>
          <span>¥{{(pay*0.7).toFixed(2)}}</span>
        </li>
        <li>
          <b>月租金：</b>
          <span>¥{{(pay*0.1).toFixed(2)}}</span>
        </li>
        <li>
          <b>租金总额：</b>
          <span>¥{{(pay*0.1*lease).toFixed(2)}}</span>
        </li>
        <li>
          <b>总金额：</b>
          <span>¥{{(pay*0.1*lease+pay*0.7).toFixed(2)}}</span>
        </li>
      </div>
      </ul>
    </div>
    <div class="sub clearFix">
      <div class="subBtn">
      <el-button @click="postOrder" id="bBtn">提交订单</el-button>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "Buy",
  data() {
    return {
      uuid:this.$store.state.uid,
      msg: "",
      bName:'',
      bPhone:'',
      bAddress:'',
      num:'',
      color:'',
      uid:this.$route.query.uid,
      uphone:'',
      uname:'',
      mesName:'',
      mesPhone:'',
      mesAddress:'',
      otype:this.$route.query.otype,
      lease:1,
      ShowImg:0,
    };
  },
  mounted() {
    this.getUdata();
    this.getUserInfo()
  },
  methods:{
    PrevFun(index){
        if(this.ShowImg!==0){
          this.ShowImg--
        }else{
          this.ShowImg=index-1
        }
      },
      NextFun(index){
        if(this.ShowImg!==index-1){
          this.ShowImg++
        }else{
          this.ShowImg=0
        }
      },
     getUdata(){
      this.$axios.get("/api/selectUserByUid",{
              params:{
                  uid:this.uid
              }}).then(res =>{
                this.uphone= res.data.data.uphone
                this.uname= res.data.data.uname
              }).catch(error =>{
               // console.log('提交失败')
                console.log(error )
              })
     },
     postOrder(){
      if(this.mesName||this.mesAddress||this.mesPhone){
        alert("用户信息填写不规范，请重新填写")
      }else{
      const orderData={
        "bname":this.bName,
        "bphone":this.bPhone,
        "baddress":this.bAddress,
        "lease":this.lease,
        "cid":this.uuid,
        "otype":this.otype,
        "glist":[{
          "gid":this.$route.query.gid,
          "uid":this.uid,
          "gprice":this.pay,
          "num":this.num
        }
        ]
      }
      console.log(orderData)
      this.$axios.post("/api/OrderAdd",orderData).then(res =>{
                //console.log(res)
                if(res.data.code==400){
                  alert(res.data.msg)
                }else{
                const OID = res.data.data.info.oid
               alert("提交订单成功，即将跳转到订单页面")
               this.$router.push({
                name:'ord',
                query:{
                  oid:OID
                }
               })
              }}).catch(error =>{
                console.log(error)
                //alert(error.data.msg)
              })
     }},
     getName() {
            if (!this.bName) {
                this.mesName = '用户名不能为空'
            } else {
                this.mesName = ''
            }
        },
      getPhone() {
            if (!this.bPhone) {
                this.mesPhone = '电话号码不能为空'
            } else if(this.bPhone.length!=11){
                this.mesPhone = '电话号码长度必须为11位'
            }else {
                this.mesPhone = ''
            }
        },
      getAddress() {
          if (!this.bAddress) {
              this.mesAddress = '收货地址不能为空'
          } else {
              this.mesAddress = ''
          }
      },
      getUserInfo() {
          if (this.uuid){
            this.$axios.get("/api/tacitTradeInfo",{
              params:{
                uid:this.uuid
              }}).then(res =>{
                //console.log(res.data)
                this.bPhone=res.data.data.phone;
                this.bName=res.data.data.name;
                this.bAddress=res.data.data.address;
              }).catch(error =>{
               // console.log('提交失败')
                console.log(error )
              })
          }
      },
  },
  computed:{
    pay(){
      return this.num*this.$route.query.gPrice
    },
    
  },
 
};
</script>

<style lang="less" scoped>
.trade-container {
  .title {
    width: 1200px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 21px;
  }
  .SwiperBox {
    position: relative;
    width: 215px;
    height: 255px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    cursor: pointer;

    img {
                    max-width:215px;
                    height: 255px;
                    vertical-align: middle;
                  }
  }
  .leftBtn,
  .rightBtn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(109, 109, 109, 0.445);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
  }
  .leftBtn {
    left: 10px;
  }
  .rightBtn {
    right: 10px;
  }
  .content {
    width: 1200px;
    margin: 10px auto 0;
    border: 1px solid rgb(221, 221, 221);
    padding: 25px;
    box-sizing: border-box;

    .receive,
    .pay {
      line-height: 36px;
      margin: 18px 0;
    }

    .address {
      padding-left: 20px;
      margin-bottom: 15px;

      .username {
        float: left;
        width: 100px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border: 1px solid #ddd;
        position: relative;
      }

      .username::after {
        content: "";
        display: none;
        width: 13px;
        height: 13px;
        position: absolute;
        right: 0;
        bottom: 0;
        background: url(./images/choosed.png) no-repeat;
      }

      .username.selected {
        border-color: #e1251b;
      }

      .username.selected::after {
        display: block;
      }

      p {
        width: 610px;
        float: left;
        line-height: 30px;
        margin-left: 10px;
        padding-left: 5px;
        cursor: pointer;

        .s1 {
          float: left;
        }

        .s2 {
          float: left;
          margin: 0 5px;
        }

        .s3 {
          float: left;
          width: 56px;
          height: 24px;
          line-height: 24px;
          margin-left: 10px;
          background-color: #878787;
          color: #fff;
          margin-top: 3px;
          text-align: center;
        }
      }

      p:hover {
        background-color: #ddd;
      }
    }

    .line {
      height: 1px;
      background-color: #ddd;
    }

    .way {
      width: 1080px;
      height: 110px;
      background: #f4f4f4;
      padding: 15px;
      margin: 0 auto;

      h5 {
        line-height: 50px;
      }

      .info {
        margin-top: 20px;

        .s1 {
          float: left;
          border: 1px solid #ddd;
          width: 120px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          margin-right: 10px;
        }

        p {
          line-height: 30px;
        }
      }
    }

    .detail {
      width: 1080px;

      background: #feedef;
      padding: 15px;
      margin: 2px auto 0;

      h5 {
        line-height: 50px;
      }

      .list {
        display: flex;
        justify-content: space-between;

        li {
          line-height: 30px;

          p {
            margin-bottom: 20px;
          }

          h4 {
            color: #c81623;
            font-weight: 400;
          }

          h3 {
            color: #e12228;
          }
        }
      }
    }

    .bbs {
      margin-bottom: 15px;

      h5 {
        line-height: 50px;
      }

      textarea {
        width: 100%;
        border-color: #e4e2e2;
        line-height: 1.8;
        outline: none;
        resize: none;
      }
    }

    .bill {
      h5 {
        line-height: 50px;
      }

      div {
        padding-left: 15px;
      }
    }
  }

  .money {
    width: 1200px;
    margin: 20px auto;

    ul {
      width: 220px;
      float: right;

      li {
        line-height: 30px;
        display: flex;
        justify-content: space-between;

        i {
          color: red;
        }
      }
    }
  }

  .sub {
    width: 1200px;
    margin: 0 auto 10px;

    .subBtn {
      float: right;
      width: 164px;
      height: 56px;
      font: 700 18px "微软雅黑";
      line-height: 56px;
      text-align: center;
      color: #fff;
      
    }
  }
  .content2 {
        padding-left: 390px;
        margin-bottom: 18px;
        position: relative;
  }
  label {
          font-size: 14px;
          width: 96px;
          text-align: right;
          display: inline-block;
        }
  input {
          width: 270px;
          height: 38px;
          padding-left: 8px;
          box-sizing: border-box;
          margin-left: 5px;
          outline: none;
          border: 1px solid #999;
        }
  span {
        font-size: 12px;
        color: red;
    }
  
  .p-img {
                padding-left: 15px;
                width: 215px;
                height: 255px;

                a {
                  color: #666;

                  img {
                    max-width:215px;
                    height: 300px;
                    vertical-align: middle;
                  }
                }
              }
}
</style>